<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/detail.css">
    <link rel="stylesheet" href="/libs/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <header></header>
    <main id="main">
        <div id="cart" class="cart">
            <span>0</span>
        </div>
        <!-- <div class="shouye" id="">
            <ul>
                <li><a href="">商城首页></a></li>
                <li><a href="">家居日用></a></li>
                <li><a href="">PUBG-快递小哥棒球帽></a></li>
            </ul>
            
        </div>
        <div class="detail" id="detail">
           <div class="photo">
            <img src="/img/list/20190109144133_34558.jpg" alt="">
            <div class="photo-small">
                <img src="/img/index/01.jpg" alt="">
                <img src="/img/index/01.jpg" alt="">
                <img src="/img/index/01.jpg" alt="">
                <img src="/img/index/01.jpg" alt="">
            </div>
           </div>
            <div class="product-info">
                <h3>PUBG-快递小哥棒球帽</h3>
                <div class="pord-price">
                    <span class="pord-dispri">￥168.00</span>
                    <em>￥299.00</em>
                </div>
                <div class="detailbox">
                    <div class="detailbox-sold">
                        已售: &nbsp;
                        <span>45</span>
                    </div>
                    <div class="detailbox-totalcom">
                        累计评价:&nbsp;
                        <span>0</span>
                    </div>
                    <div class="detailbox-star">

                    </div>
                </div>
                <div class="pord-num">
                    <span>数量：</span>
                    <button type="button" class="btn btn-default">-</button>
                    <button type="button" class="btn btn-default">1</button>
                    <button type="button" class="btn btn-default">+</button>
                    （库存充足）
                </div>
                <div class="pord-btn">
                    <button type="button" class="btn btn-primary btn-lg pord-btn-jia">加入购物车</button>
                    <button type="button" class="btn btn-warning btn-lg pord-btn-xiu">立即购买</button>
                </div>
            </div>

        </div>
        <div class="pord-tab">
            <ul>
                <li>商品详情</li>
                <li>用户点评</li>
                <li>联系商家</li>
            </ul>
        </div> -->
        <!-- <div class="bigImgContent">
            <img src="/img/index/20190219114847_322871.jpg" alt="">
            <img src="/img/index/20190219114847_322871.jpg" alt="">
        </div> -->
        
    </main>
    
    <script type="text/html" id="mainTemplate">
        <div class="shouye" id="">
            <ul>
                <li><a href="">商城首页></a></li>
                <li><a href="">家居日用></a></li>
                <li><a href="">PUBG-快递小哥棒球帽></a></li>
            </ul>
            
        </div>
        <div class="detail depic" id="detail">
           <div class="photo">
            <img src="{{image}}" alt="" class="zhong" id="zhong">
            <span id="mag"></span>
            <div class="big-box">
                <img src="{{image}}" alt="" class="da">
            </div>
            <div class="photo-small" id="photo-small">
                {{each photo img}}
                
                    <a  class="zoomGalleryActive"  data-image="{{img.url}}" data-zoom-image="{{img.url}}">
                        <img src="{{img.url}}"  class="smallpic">
                    </a>
                
                {{/each}}
            </div>
            
           </div>
            <div class="product-info">
                <h3>{{title}}</h3>
                <div class="pord-price">
                    <span class="pord-dispri">￥{{price}}</span>
                    <em>￥{{tbOriginPrice}}</em>
                </div>
                <div class="detailbox">
                    <div class="detailbox-sold">
                        已售: &nbsp;
                        <span>{{saleNum}}</span>
                    </div>
                    <div class="detailbox-totalcom">
                        累计评价:&nbsp;
                        <span>0</span>
                    </div>
                    <div class="detailbox-star">

                    </div>
                </div>
                <div class="pord-num" >
                    <span>数量：</span>
                    <button type="button" class="btn btn-default jian">-</button>
                    <input type="text" value="1" id="pord-num-input">
                    <button type="button" class="btn btn-default jia">+</button>
                    （库存充足）
                </div>
                <div class="pord-btn">
                    <button type="button" class="btn btn-primary btn-lg pord-btn-jia" id="add-to-cart-btn">加入购物车</button>
                    <button type="button" class="btn btn-warning btn-lg pord-btn-xiu">立即购买</button>
                </div>
                
            </div>

        </div>
        <div class="pord-tab">
            <ul>
                <li>商品详情</li>
                <li>用户点评</li>
                <li>联系商家</li>
            </ul>
        </div>   
        <div class="bigImgContent">
           {{each descContentList detailImg}}
               {{if detailImg.photo}}
                   <img src="{{detailImg.photo.url}}" alt="" class="bigimg">
               {{/if}}
           {{/each}}
       </div>
    </script>
    
    <footer></footer>
    <script src="/libs/require.min.js" data-main="/js/detail.js"></script>
</body>
</html>